<template>
  <div>
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item
        style="border-radius:5px;box-shadow: darkgrey 10px 10px 30px 5px ;"
        v-for="item in data"
        :key="item.url"
      >
        <img style=" height: 100%;width:100%;" :src="item.url">
      </el-carousel-item>
    </el-carousel>
    <div class="Middletitle">好书推荐Books</div>
    <div class="buttonDiv">
      <el-row>
        <el-button type="warning" size="medium" plain>推荐</el-button>
      </el-row>
    </div>
    <div class="contentDiv">
      <div
        class="content"
        v-bind:class="{ active: isActive }"
        v-for="(item,index) in list"
        :key="index"
        v-on:mouseover="!isActive"
      >
        <img v-if="item.imgURL" :src="item.imgURL" class="contentImg"/>
        <img v-if="!item.imgURL" src="https://picture-1257052444.cos.ap-beijing.myqcloud.com/beijing.png" class="contentImg"/>
        <div class="contentButtom">
          <a class="contentTitle" @click="toContent(item)">{{item.title}}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "homeContent",
  data() {
    return {
      isActive: false,
      list: [],
      data: [
        {
          url:
            "https://picture-1257052444.cos.ap-beijing.myqcloud.com/banner/a1.png"
        },
        {
          url:
            "https://picture-1257052444.cos.ap-beijing.myqcloud.com/banner/a2.png"
        },
        {
          url:
            "https://picture-1257052444.cos.ap-beijing.myqcloud.com/banner/%E6%96%B0%E5%BB%BA%E4%BD%8D%E5%9B%BE%E5%9B%BE%E5%83%8F.png"
        }
      ]
    };
  },
  methods: {
    su() {
      this.$axios
        .get("/api/data")
        .then(res => {
          console.log(res)
          this.list = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    toContent(item) {
      console.log(item);
      this.$router.push({
        path: "content",
        query: {
          id: item._id
        }
      });
    }
  },
  mounted() {
    this.su();
  }
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel {
  padding: 15px 120px;
  margin-top: 10px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.grid-content {
  border-radius: 5px;
  min-height: 36px;
}
.Middletitle {
  background-color: #ffffff;
  margin: 0px 120px;
  height: 70px;
  border-radius: 5px;
  line-height: 70px;
  text-align: center;
}
.buttonDiv {
  /* background-color: #ffffff; */
  margin: 10px 120px;
}
.contentDiv {
  margin: 10px 120px;
  /* 转化元素类型 */
  display: grid;
  /* 设置网格的间隙 */
  grid-gap: 10px;
  /* 4 列  */
  grid-template-columns: repeat(5, 1fr);
}
.content {
  min-height: 260px;
  border-radius: 5px;
  background-color: #ffffff;
}
.contentImg {
  border-radius: 5px 5px 0 0;
  /* max-height: 220px; */
  width: 100%;
  max-height: 230px;
  height: 230px;
  overflow: hidden;
}
.contentImg::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.contentButtom {
  width: 100%;
  /* margin: 0; */
  margin: 0;
  min-height: 80px;
  text-overflow: ellipsis;
}
.contentTitle {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 15px;
  font-weight: normal;
  padding: 5px;
}
.headIcon {
  width: 30px;
  height: 30px;
  margin-top: -10px;
  margin-bottom: 10px;
  border-radius: 50%;
  float: left;
  margin-right: 5px;
}
.name {
  font-size: 13px;
}
.divborder {
  margin-top: -10px;
}
a:hover {
  color: #ff0000;
}
a {
  text-decoration: none;
  color: #000;
}
</style>
<style>
.el-carousel__container {
  height: 450px !important ;
}
</style>

